/*
 * @Author: 郑锐 307057322@qq.com
 * @Date: 2022-09-20 14:24:44
 * @LastEditors: 孙鹏程 a2145261508@163.com
 * @LastEditTime: 2023-08-08 17:15:11
 * @FilePath: \BZ_XN_AnQuanZongHeZhanShiPingTaiWeb\src\assets\mixin\mapOL.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import openLayerMap from '@/utils/openLayersTools'
import 'ol/ol.css'
import { defaults as defaultControls } from 'ol/control'
import Map from 'ol/Map'
import View from 'ol/View'
import { zoomOut, zoomIn, setMapCenter, deleteCity } from '@/utils/mapOpenLayer'
export default {
  data() {
    return {
      map: null,
      zoom: null,
      wmsSource: null,
      wmsLayer: null,
      mapClickTrue: true,
      cityLayer: null,
      countLayer: null
    }
  },
  methods: {
    mapEvent() {
      // 地图缩放事件
      this.map.on('moveend', () => {
        // 获取当前地图的缩放级别
        const zoom = this.map.getView().getZoom()
        if (zoom >= 6) {
          this.cityLayer.setVisible(true)
        } else if (zoom >= 11) {
          this.countLayer.setVisible(true)
          this.cityLayer.setVisible(false)
        } else {
          this.countLayer.setVisible(false)
          this.cityLayer.setVisible(false)
        }
      })
    },
    initMap(target) {
      const map = new Map({
        target: target,
        view: new View({
          center: [106.55, 29.57], // 中心点经纬度
          zoom: this.zoom || 4, // 图层缩放大小
          projection: 'EPSG:4326',
          minZoom: 4,
          maxZoom: 15
        }),
        controls: defaultControls({
          loading: true,
          zoom: false,
          attribution: false,
          rotate: false
        })
      })
      return map
    },
    // 切换行政区图层
    changeCurrentType(type) {
      const layers = this.map.getLayers().getArray()
      layers.forEach((e) => {
        if (e.get('layerId') === type) {
          e.setVisible(true)
        } else if (e.get('layerId') === 'text') {
          e.setVisible(true)
        } else if (e.get('type') === 'base' && e.get('layerId') !== type) {
          e.setVisible(false)
        }
      })
    },
    // 缩小
    changeZoomOut() {
      zoomOut(this.map)
    },
    // 放大
    changeZoomIn(val) {
      zoomIn(this.map)
    },
    // 设置中线点
    changeCenter() {
      const center = [106.55, 29.57] // 中心点经纬度
      const zoom = 8.5 // 图层缩放大小
      setMapCenter(this.map, center, zoom)
    },
    // 设置透明度
    changeOpacity(val) {
      const layers = this.map.getLayers().getArray()
      layers.forEach((e) => {
        if (e.get('layerId') === 'searchLayer') {
          e.setOpacity(val)
        }
      })
    },
    // 工具功能
    changeTools(value) {
      switch (value) {
        case 'Point':
          this.mapClickTrue = false
          openLayerMap.measure(this.map, 'Point', this)
          break
        case 'LineString':
          this.mapClickTrue = false
          openLayerMap.measure(this.map, 'LineString', this)
          break
        case 'Polygon':
          this.mapClickTrue = false
          openLayerMap.measure2(this.map, 'Polygon', this)
          break
        case 'close':
          this.mapClickTrue = true
          openLayerMap.clearMeasure(this.map)
          break
      }
    },

    // 关闭地图弹窗
    closeWindow() {
      deleteCity(this.map, 'heightLight')
      this.dialogTableVisible = false
      this.activeName = 'first'
    },
    // 点位的hover事件
    pointerHover(e) {
      if (e.dragging) {
        return
      }
      const pixel = this.map.getEventPixel(e.originalEvent)
      // 鼠标悬浮在marker上
      var layer = this.map.forEachFeatureAtPixel(pixel, (feature, layer) => {
        return layer
      })
      if (layer) {
        const layerName = layer.get('name')
        if (layerName === 'pointer') {
          const PointAttr = layer.get('attr')
          if (PointAttr !== 'center') {
            // 调用提示框方法
            const { coordinate, innerHTML } = this.settingTipInfo(PointAttr)
            addWindowTip(this.map, coordinate, innerHTML)
          }
        } else {
          const layer = this.map.getOverlayById('pointTip')
          if (layer) {
            this.map.removeOverlay(layer)
          }
        }
      }
    },
    // 点位的Click事件
    pointerClick(e, resolve) {
      const pointTip = this.map.getOverlayById('pointTip')
      if (pointTip) {
        this.map.removeOverlay(pointTip)
      }
      if (e.dragging) {
        return
      }
      const pixel = this.map.getEventPixel(e.originalEvent)
      // 鼠标悬浮在marker上
      var layer = this.map.forEachFeatureAtPixel(pixel, (feature, layer) => {
        return layer
      })
      if (layer) {
        const layerName = layer.get('name')
        if (layerName === 'pointer') {
          const PointAttr = layer.get('attr')
          if (PointAttr !== 'center') {
            // 调用提示框方法
            typeof resolve === 'function' && resolve(PointAttr)
          }
        }
      }
    },
    // 点位的Click事件
    settingTipInfo(info) {
      let innerHTML = ''
      const coordinate = [info.jd, info.wd]
      innerHTML = `<div class="ol-title ">海河流域</div>
          <div class="ol-info">
          <p>海河流域有水资源利用上线管控分区：10个，水质污染源：10个，水质监测站：10个，水环境优先保护区：10个，水环境工业污染重点管控区：10个，水环境城镇生活污染重点管控区：10个水环境一般管控区：10个</p>
          </div>`
      return {
        coordinate,
        innerHTML
      }
    }
  }
}
